<template>
	<view class="conter">
		<view class="Back">
			<view @click="gobuck">
				<u-icon color="#fff" size="22" class="left" name="arrow-left"></u-icon>
			</view>
			<view style="margin-left: 80rpx">奖励分配</view>
			<view @click="gofenpei" class="fen_box">
				<image src="../../static/images/fenpei.png" mode=""></image>
			</view>
		</view>
		<view class="box">
			<view class="sfntio_box">
				<view>名称</view>
				<view>火力值</view>
				<view>分配</view>
			</view>
			<u-list @scrolltolower="scrolltolower" height="1050rpx">
				<u-list-item v-for="(item, index) in guildList" :key="index">
					<view class="list_box">
						<view style="display: flex; align-items: center">
							<view class="header_box">
								<u--image width="91rpx" height="91rpx" radius="50%" :src="imgUrl + item.avatar"></u--image>
							</view>
							<view class="name">{{ item.name }}</view>
						</view>
						<view class="number">{{ item.influence }}</view>
						<view class="minus_box">
							<!-- <u-number-box v-model="item.value">
								<view slot="minus" class="minus">
									<u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 50px; color: #9e9e9e; text-align: center">{{ item.value }}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box> -->
							<u-number-box
								iconStyle="width: 30rpx;
								color: #FFFFFF;
								margin: 0 20rpx;"
								bgColor="#9e9e9e"
								inputWidth="50rpx"
								color="#fff"
								min="0"
								v-model="item.value"
								buttonSize="20"
								@change="valChange(item, index)"
							>
								<view slot="minus" class="minus">
									<u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 50px; color: #9e9e9e; text-align: center">{{ item.value ? item.value : 0 }}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
				</u-list-item>
				<view v-if="guildList.length == 0">
					<image style="width: 280rpx; height: 280rpx; margin: 275rpx 220rpx 0" src="../../static/images/fighting.gif" mode=""></image>
				</view>
			</u-list>
		</view>
		<view class="butt_box" @click="confirmAward" v-show="allocation">确认分配</view>
	</view>
</template>

<script>
import { getGuildMemberList, sureAwardAllot } from '@/api/union/union.js';
import { getUserAdmin } from '@/utils/auth.js';
import config from '@/config.js';
export default {
	data() {
		return {
			value: 1,
			imgUrl: config.gillUrl,
			guildId: 0,
			number: 0,
			curPage: 1,
			curPageSize: 200,
			totalSize: 0,
			guildList: [],
			rewordList: [],
			userAdmin: getUserAdmin(),
			allocation: false
		};
	},
	onLoad(option) {
		this.guildId = option.guildId;
		this.number = option.number;
	},
	onShow() {
		this.guildList = [];
		this.rewordList = [];
		this.getGuildList();
	},
	methods: {
		//工会成员列表
		async getGuildList() {
			let param = {};
			param.curPage = this.curPage;
			param.curPageSize = this.curPageSize;
			param.guildId = this.guildId;
			const data = await getGuildMemberList(param);
			console.log(data, '天团');
			let _this = this;
			// console.log(this.userAdmin, 'userAdmin.');
			data.data.pageData.map((i) => {
				if (i.identity == 2 && this.userAdmin) {
					if (this.userAdmin.id == i.memeberId) {
						this.allocation = true;
					}
				}
				_this.guildList.push(i);
			});

			// console.log(this.guildList, '天团成员');
			this.totalSize = data.data.totalSize;
		},
		// list加载事件
		scrolltolower() {
			//加载时候判断是否还有下一页
			if (this.guildList.length < this.totalSize) {
				this.curPage++;
				//则还有下一页
				this.getGuildList();
			} else {
				this.curPage = 1;
			}
		},
		confirmAward() {
			this.guildList.forEach((item) => {
				if (item.value > 0) {
					this.rewordList.push({
						memberId: item.memeberId,
						guildId: this.guildId,
						allotRatio: item.value
					});
				}
				item.value = 0; // 将 item.value 设置为 0
			});
			// console.log(this.rewordList, 'pppp');
			if (this.rewordList.length > 0) {
				let sumNumber = 0;
				this.rewordList.forEach((item) => {
					sumNumber += item.value;
				});
				if (sumNumber > this.number) {
					this.$modal.showToast('分配数量大于仓库数量');
					return;
				} else {
					// 调用奖励分配接口
					this.getAward();
				}
			} else {
				this.$modal.showToast('请分配奖励');
			}
			this.rewordList = [];
		},
		async getAward() {
			const data = await sureAwardAllot(this.rewordList);
			if (data.code == 200) {
				// this.$modal.showToast('分配成功');
				this.$modal.showToast(data.msg);
				this.rewordList = [];
			} else {
				this.$modal.showToast(data.msg);
			}
		},
		// 重置所有数据的value值
		valChange(item, index) {
			// console.log('当前值为: ' + item.value,index);
		},
		gobuck() {
			uni.navigateBack(1);
		},
		gofenpei() {
			uni.navigateTo({
				url: `/pages/tiantuan/feiPei?guildId=${this.guildId}`
			});
		}
	}
};
</script>

<style scoped lang="less">
page {
	background-color: #1a1a1a;
}

::v-deep .u-icon {
	margin-left: 5rpx;
	margin-top: 6rpx;
}

.butt_box {
	width: 680rpx;
	height: 117rpx;
	background: #eef862;
	color: #353535;
	font-weight: 700;
	font-size: 42rpx;
	line-height: 117rpx;
	text-align: center;
	margin-top: 100rpx;
	border-radius: 392rpx;
	z-index: 99999;
}
.conter {
	padding: 80rpx 34.88rpx;

	.Back {
		width: 100%;
		height: 112rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24.88rpx;
		justify-content: space-between;
		font-size: 35rpx;
		font-family: ' zcoolqingkehuangyouti, zcoolqingkehuangyouti';
		font-weight: 500;
		color: #ffffff;
		.fen_box {
			width: 166rpx;
			height: 56rpx;
			margin-top: 15rpx;
			image {
				width: 166rpx;
				height: 56rpx;
			}
		}
	}

	.minus_box {
		.minus {
			width: 31rpx;
			height: 31rpx;
			background: #2f2f2f;
			border-radius: 5rpx;
		}

		.plus {
			width: 31rpx;
			height: 31rpx;
			background: #2f2f2f;
			border-radius: 5rpx;
		}
	}

	.box {
		width: 680rpx;
		height: 1150rpx;
		border-radius: 52rpx;
		border: 3rpx solid #2f2f2f;
		background: linear-gradient(180deg, #191919 0%, #282828 100%);

		.sfntio_box {
			display: flex;
			color: #ffffff;
			font-size: 31rpx;
			font-weight: 700;
			padding: 34.88rpx 100rpx 0 140rpx;
			justify-content: space-between;
		}

		.list_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx 0 8rpx;
			width: 631rpx;
			height: 117rpx;
			margin-top: 34.88rpx;
			margin-left: 24rpx;
			background: #1b1b1b;
			border-radius: 323rpx;
			border: 2rpx solid #2f2f2f;

			.header_box {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
			}

			.name {
				width: 100rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #9e9e9e;
				font-size: 35rpx;
				font-weight: 400;
				margin-left: 16rpx;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			}

			.number {
				color: #9e9e9e;
				font-weight: 400;
				font-size: 35rpx;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			}
		}
	}
}
</style>
